<template>
  <div class="threedtext">
      {{ text }}
  </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World',
        }
    }
}
</script>

<style lang="less" scoped>
.threedtext {
    color: #70869d;
    letter-spacing: .15em;
    text-shadow:
        -1px -1px 1px #efede3,
        0px 1px 0 #2e2e2e,
        0px 2px 0 #2c2c2c,
        0px 3px 0 #2a2a2a,
        0px 4px 0 #282828,
        0px 5px 0 #262626,
        0px 6px 0 #242424,
        0px 7px 0 #222,
        0px 8px 0 #202020,
        0px 9px 0 #1e1e1e,
        0px 10px 0 #1c1c1c,
        0px 11px 0 #1a1a1a,
        0px 12px 0 #181818,
        0px 13px 0 #161616,
        0px 14px 0 #141414,
        0px 15px 0 #121212,
        2px 20px 5px rgb(0 0 0 / 90%),
        5px 23px 5px rgb(0 0 0 / 30%),
        8px 27px 8px rgb(0 0 0 / 50%),
        8px 28px 35px rgb(0 0 0 / 90%);
}
</style>
